/*
 * @Author: Zhang Wei
 * @Date: 2022-04-17 21:44:55
 * @LastEditors: Zhang Wei
 * @LastEditTime: 2022-04-17 23:29:59
 * @FilePath: \02_tank\src\canvas\TankCanVAS.ts
 * @Word: There is nothing either good or bad, but thinking makes it so.
 * @Description:
 */

import config from '../config';
import PositionService from '../service/positionService';

import CanvasAbstract from './CanvasAbstract';

import TankModel from '../model/TankModel';

class tankCanvas extends CanvasAbstract implements ICanvas {
  num(): number {
    return config.tank.num;
  }
  model(): ModelConstructor {
    return TankModel;
  }

  render(): void {
    this.createModels();
    super.renderModels();

    setInterval(() => {
      this.renderModels();
    }, config.timeOut);
  }

  // 渲染模型 (重写)
  protected renderModels() {
    // 清除画布
    this.canvas.clearRect(0, 0, config.canvas.width, config.canvas.height);

    // 绘制模型
    super.renderModels();

    // this.models.forEach((model) => {
    //   model.render();
    //   this.canvas.drawImage(
    //     model.getImg(),
    //     model.x,
    //     model.y,
    //     config.module.width,
    //     config.module.height
    //   );
    // });
  }

  /**
   * 绘制模型
   */
  protected createModels() {
    let num = this.num();
    let model = this.model();

    for (let i = 0; i < num; i++) {
      const pos = PositionService.getPosition();
      const instance = new model(this.canvas, pos.x, 0);

      this.models.push(instance);
    }
  }
}

export default new tankCanvas();
